<template>
  <!-- 企业公共组件 -->
  <div class="company" :class="fix?'fixed':''">
        <!-- 公司封面 -->
        <div class="all">
          <!-- 头部 -->
        <head-usual :title="detailModel.MInfo.name" :to="to"></head-usual>
        <!-- 公司信息 -->
        <div class="company-info">
            <div class="company-info-hidder"></div>
            <dl>
                <dt class="company-logo01">
                    <img v-bind:src="detailModel.MInfo.headportrait" />
                </dt>
                <dd class="company-dd">
                    <p class="company-dd-p1">{{detailModel.MInfo.name}}</p>
                    <div class="company-dd-p2">
                        <div class="company-dd-01 company-dd-squre">
                            <img src="~@/assets/renzheng.png" class="company-dd-01-img"/>
                        </div>
                        <div class="company-dd-02 company-dd-squre">
                            <img src="~@/assets/phone.png" class="company-dd-02-img"/>
                        </div>
                        <div class="company-dd-03 company-dd-squre">
                            <img src="~@/assets/email.png" class="company-dd-03-img"/>
                        </div>
                        <div class="company-dd-04 company-dd-squre">
                            <img src="~@/assets/wechat.png" class="company-dd-04-img"/>
                        </div>
                        <div class="company-dd-05 company-dd-squre">
                            <img src="~@/assets/vip1.png" class="company-dd-05-img"/>
                        </div>
                        <div class="company-dd-06 company-dd-squre">
                            <img src="~@/assets/small_zhengshu.png" class="company-dd-06-img"/>
                        </div>      
                    </div>
                    <p class="company-dd-p3"></p>
                </dd>
            </dl>
            <div class="company-bottom">
               <div class="company-bottom-left">
                    <p>{{detailModel.Statistics.Score}}</p>
                    <p>综合评分</p>
                    <span class="company-bottom-fenge01"></span>
                </div>
                <div>
                    <p>{{detailModel.Statistics.CaseCount}} 个</p>
                    <p>项目作品</p>
                <span class="company-bottom-fenge02"></span>
                </div>
                <div>
                    <p>{{detailModel.Statistics.IngCount}} 个</p>
                    <p>正在施工</p>
                </div>
                <span class="company-bottom-fenge03"></span>
                <div>
                    <p>{{detailModel.Statistics.CommentCount}} 次</p>
                    <p>客户评论</p>
                </div>
            </div>
        </div>
    </div>
      <!-- 各个选项 -->
      <div class="swipe-header">
          <mt-navbar v-model="selected">
          <mt-tab-item id="1">首页</mt-tab-item>
          <mt-tab-item id="2">公司介绍</mt-tab-item>
          
          <mt-tab-item id="8">TA的晒场</mt-tab-item>
          <mt-tab-item id="9">TA的服务</mt-tab-item>

          <mt-tab-item id="3">项目作品</mt-tab-item>
          <mt-tab-item id="4">团队成员</mt-tab-item>
          <mt-tab-item id="5">企业证书</mt-tab-item>
          <mt-tab-item id="6">评论</mt-tab-item>
          <mt-tab-item id="7">合作伙伴</mt-tab-item>
          </mt-navbar>
      </div>  
        <!-- tab-container -->
        <mt-tab-container v-model="selected" swipeable>
        <mt-tab-container-item id="1">
            <!-- 首页 -->
            <index :id="id" v-if="selected==1"></index>
        </mt-tab-container-item>
        <mt-tab-container-item id="2" >
            <!-- 基本信息 -->
            <about :id="id" v-if="selected==2"></about>
        </mt-tab-container-item>

        <mt-tab-container-item id="8">
            <!-- 晒场 -->
          <daily :id="id" v-if="selected==8"></daily>
        </mt-tab-container-item>
        <mt-tab-container-item id="9">
            <!-- 服务 -->
            <service :id="id" v-if="selected==9">
             
            </service>
        </mt-tab-container-item>

        <mt-tab-container-item id="3" >
             <!-- 项目作品 -->
            <projects :id="id" v-if="selected==3"></projects>
        </mt-tab-container-item>
         <mt-tab-container-item id="4" >
             <!-- 设计团队 -->
            <team :id="id" v-if="selected==4"></team>
        </mt-tab-container-item>
        <mt-tab-container-item id="5" >
             <!-- 证书 -->
           <certificate :id="id" v-if="selected==5"></certificate>
        </mt-tab-container-item>
        <mt-tab-container-item id="6" >
             <!-- 评论 -->
           <comment :id="id" v-if="selected==6"></comment>
        </mt-tab-container-item>
        <mt-tab-container-item id="7">
             <!-- 合作伙伴 -->
            <partner :id="id"  v-if="selected==7"></partner>
        </mt-tab-container-item>
        </mt-tab-container>
      <company-footer :cid="id" :type="3" @fix="handleShare" words="做项目"></company-footer>
  </div>
</template>
<script>
// import headUsual from "@/pages/components/headUsual";
import projects from "@/pages/m/controls/projects";
import certificate from "@/pages/m/controls/certificate";
import index from "@/pages/c/controls/index";
import about from "@/pages/c/controls/about";
import team from "@/pages/c/controls/team";
import comment from "@/pages/c/controls/comment";
import partner from "@/pages/c/controls/partner";

import daily from "@/pages/m/controls/daily";
import service from "@/pages/m/controls/service";

import companyFooter from "@/pages/components/footerBar";
import { GetDetail } from "@/api/zgz";
export default {
  data() {
    return {
      selected: "1",
      to: "/zgz",
      fix:false,
      detailModel: {
        MInfo: {
          headportrait: ""
        },
        Statistics: {
          Score: 0
        },
        MIcon: {
          isRealName: false
        }
      },
      id: 0
    };
  },
  created() {
    this.id =parseInt(this.$route.params.id);
    this._getDetail();
  },
  methods: {
    _getDetail() {
      this.$indicator.open();
      GetDetail(this.id).then(res => {
        if (res.StatusCode === 200) {
          this.detailModel = res.Data;
          this.$indicator.close();
        }
      });
    },
  handleShare(fix){
    this.fix=fix;
  }
  },
  components: {
    index,
    about,
    projects,
    team,
    certificate,
    comment,
    partner,
    companyFooter,
    daily,
    service
  },
  watch: {
    selected(val, oldVal) {
      console.log(val);
      if (val == 4) {
        $(".swipe-header")
          .children(".mint-navbar")
          .css("left", "-245px");
        return;
      }
       if (val == 9) {
        $(".swipe-header")
          .children(".mint-navbar")
          .css("left", "0px");
        return;
      }
      // if (val == 1) {
      //   $(".swipe-header")
      //     .children(".mint-navbar")
      //     .css("left", "0px");
      //   return;
      // }
    }
  }
};
</script>

<style lang='scss' scoped>
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  
}
// 合作伙伴
.partner {
  padding-bottom: 100px;
}
.mint-navbar {
  min-width: 600px;
}
//证书
.company-talk {
  padding-bottom: 100px;
}
// 公司封面
.all {
  background: #f4f4f4;
  height: 100%;
}
/* 头部 */
.header {
  height: 44px;
  background: #ffffff;
  line-height: 44px;
}
.header-left {
  display: block;
  float: left;
  font-size: 18px;
  margin-left: 10px;
  margin-top: 15.18px;
}
.header-middle {
  display: block;
  float: left;
  margin-left: 31px;
  width: 299.6px;
  height: 29.3px;
  background: #eeeeee;
  border-radius: 3px;
  line-height: 29.3px;
  margin-bottom: 7.35px;
  margin-top: 8.67px;
}
.header-middle > .icon {
  font-size: 16px;
  display: block;
  float: left;
  margin-left: 6px;
  margin-right: 5px;
  margin-top: 6.73px;
  color: #999999;
}
.header-middle > input {
  display: block;
  color: #999999;
  float: left;
  font-size: 12px;
  width: 271px;
  line-height: 29.3px;
  border: none;
  background: #eeeeee;
  padding-left: 3px;
}
.header-right {
  display: block;

  float: right;
  font-size: 15px;
  margin-top: 15.18px;
  margin-right: 11px;
}
/* 企业信息 */
.company-info {
  height: 200px;
  background: url("~@//assets/company_bg.png") no-repeat center center;
  background-size: 100% 200px;
  position: relative;
  padding-left: 12px;
  background-color: rgba(100, 100, 100, 0.3);
}
/* 上方遮罩层 */
.company-info-hidder {
  width: 100%;
  height: 200px;
  background: black;
  position: absolute;
  opacity: 0.3;
  left: 0;
  top: 0;
}
.company-info > dl {
  position: absolute;
}
.company-logo01 {
  display: inline-block;
  width: 68.66px;
  height: 68.66px;
  margin-left: 12px;
  margin-top: 24px;
  float: left;
}
.company-logo01 > img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
.company-dd {
  margin-top: 24px;
  margin-left: 12px;
  float: left;
}
.company-dd-p1 {
  color: #ffffff;
  font-size: 18px;
  margin-bottom: 8.66px;
}
.company-dd-p2 {
  display: block;
  height: 16.3px;
  margin-bottom: 8.66px;
}
.company-dd-p3 {
  color: #999999;
  font-size: 14px;
}
.company-dd-01 {
  width: 16.3px;
  height: 16.3px;
  background: #dcdcdc;
  text-align: center;
  display: block;
}
.company-dd-squre {
  width: 20px;
  height: 20px;
  text-align: center;
  display: block;
  float: left;
  margin-right: 3.5px;
}

.company-dd-01-img {
  width: 11.04px;
  height: 13px;
  display: block;
  margin: 3.66px auto;
}
.company-dd-02 {
  background: #ff9c00;
}
.company-dd-02-img {
  width: 8.17px;
  height: 13.9px;
  display: block;
  margin: 2.485px auto;
}
.company-dd-03 {
  background: #3887fe;
}
.company-dd-03-img {
  width: 13.42px;
  height: 9.76px;
  display: block;
  margin: 4.15px auto;
}
.company-dd-04 {
  background: #84d945;
}
.company-dd-04-img {
  width: 12.2px;
  height: 9.76px;
  display: block;
  margin: 4.15px auto;
}
.company-dd-05 {
  background: #e74445;
}
.company-dd-05-img {
  width: 10.98px;
  height: 9.028px;
  display: block;
  margin: 4.45px auto;
}
.company-dd-06 {
  background: #fbcd4f;
}
.company-dd-06-img {
  width: 14.64px;
  height: 14.64px;
  display: block;
  margin: 2.15px auto;
}

.company-dd-txt {
  display: block;
  float: left;
  font-size: 12px;
  color: #ffffff;
  margin-right: 6px;
  line-height: 16px;
}

/* 下方阴影栏 */
.company-bottom {
  width: 100%;
  height: 53.3px;
  background: rgba(22, 28, 41, 0.5);
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  text-align: center;
  align-items: center;
}
.company-bottom > div {
  width: 33.3%;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
}
.company-bottom-fenge01 {
  position: absolute;
  left: 102px;
  top: 16px;
  width: 0px;
  height: 20px;
  background: #ffffff;
  border: 1px solid #ffffff;
}
.company-bottom-fenge02 {
  position: absolute;
  left: 204px;
  top: 16px;
  width: 0px;
  height: 20px;
  background: #ffffff;
  border: 1px solid #ffffff;
}
.company-bottom-fenge03 {
  position: absolute;
  left: 306px;
  top: 16px;
  width: 0px;
  height: 20px;
  background: #ffffff;
  border: 1px solid #ffffff;
}
// 设置激活按钮的样式
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 2px solid #fd4f00;
  color: #fd4f00;
  margin-bottom: -2px;
}
.mint-tab-item {
  color: #666666;
}
.swipe-header {
  width: 100%;
  height: 58.3px;
  background-color: #fff;
  overflow-x: scroll;
  position: relative;
  .mint-navbar {
    min-width: 660.125px;
    // display: flex;
    // justify-content: flex-start;
    position: absolute;
    transition: left ease-in-out 0.5s;
  }
}
.swipe-header::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: #fff;
}
</style>
